<template>
  <scroll-view
    class="recommends_view"
    @scrolltolower="handlerTolower"
    scroll-y
    v-if="recommends.length > 0"
  >
    <!-- 推荐开始 -->
    <view class="recommend_wrap">
      <navigator
        class="recommend_item"
        v-for="item in recommends"
        :key="item.id"
        :url="`/pages/album/index?id=${item.target}`"
      >
        <image :src="item.thumb" mode="widthFix" />
      </navigator>
    </view>
    <!-- 结束 -->
    <!-- 月份 开始-->
    <view class="month_wrap">
      <view class="month_title">
        <view class="month_title_info">
          <view class="month_info">
            <text>{{ months.DD }}/</text>
            {{ months.MM }} 月
          </view>
          <view class="month_text"> 你负责美丽就好 </view>
        </view>
        <view class="month_title_more"> 更多 > </view>
      </view>
      <view class="month_content">
        <view
          class="month_item"
          v-for="(item, index) in months.items"
          :key="item.id"
        >
          <go-detail :list="months.items" :index="index">
            <image
              :src="item.thumb + item.rule.replace('$<Height>', 360)"
              mode="aspectFill"
            />
          </go-detail>
        </view>
      </view>
    </view>
    <!-- 月份 结束 -->
    <!-- 热门开始 -->
    <view class="hots_wrap">
      <view class="hots_title">
        <text> 热门 </text>
      </view>
      <view class="hots_content">
        <view class="hot_item" v-for="item in hots" :key="item.id">
          <go-detail :list="hots" :index="index">
            <image :src="item.thumb" mode="aspectFill" />
          </go-detail>
        </view>
      </view>
    </view>

    <!-- 热门结束 -->
  </scroll-view>
</template>

<script>
import moment from "moment";
import goDetail from "../../../components/goDetail.vue";

export default {
  components: { goDetail },
  mounted() {
    this.getList();

    //   // 修改页面的标题
    //   uni.setNavigationBarTitle({
    //     title: '推荐'
    //   });
  },
  data() {
    return {
      recommends: [],
      months: [],
      hots: [],
      params: {
        // 获取几条数据
        limit: 30,
        // 关键字
        order: "hot",
        // 跳过几条
        skip: 0,
      },
      // 是否还有下一页
      hasMore: true,
    };
  },
  methods: {
    getList() {
      this.request({
        url: "http://service.picasso.adesk.com/v3/homepage/vertical",
        data: this.params,
      }).then((result) => {
        // console.log(result);
        // 判断是否还有热点数据
        if (result.res.vertical.length === 0) {
          this.hasMore = false;
          return;
        }
        // 第一次请求
        if (this.recommends.length === 0) {
          // 推荐模块的
          this.recommends = result.res.homepage[1].items;
          // 月份
          this.months = result.res.homepage[2];
          console.log(this.recommends);
          // 时间错改成月份 moment.js
          this.months.MM = moment(this.months.stime).format("MM");
          this.months.DD = moment(this.months.stime).format("DD");
          // this.hots = result.res.vertical;
        }

        // 拼接数据
        // es6实现热门数据改变
        this.hots = [...this.hots, ...result.res.vertical];
        console.log(this.hots);
      });
    },
    // 滚动条滚动触底
    handlerTolower() {
      console.log("触发到底");
      /** 1、修改参数 skip +=limit
       * 2、重新返送请求
       * 3、请求成功，将数据拼接
       */
      if (this.hasMore) {
        this.params.skip += this.params.limit;
        this.getList();
      } else {
        uni.showToast({
          title: "热点数据没有了",
          icon: "none",
          //  duration: 2000
        });
      }
    },
  },
};
</script>

<style lang="scss">
.recommends_view {
  // 不同手机的高度是不一样的，计算 屏幕的高度-头部标题的高度
  height: calc(100vh - 36px);
}
.recommend_wrap {
  // flex 布局
  display: flex;
  flex-wrap: wrap;
  .recommend_item {
    width: 50%;
    border: 5rpx solid #fff;
  }
}
.month_wrap {
  .month_title {
    display: flex;
    justify-content: space-between;
    padding: 20rpx;
    .month_title_info {
      color: $color;
      font-size: 30rpx;
      font-weight: 600;
      display: flex;
      .month_info {
        text {
          font-size: 36rpx;
        }
      }
      .month_text {
        font-size: 34rpx;
        margin-left: 30rpx;
        color: #666;
      }
    }
    .month_title_more {
      font-size: 24rpx;
      color: $color;
    }
  }
  .month_content {
    display: flex;
    flex-wrap: wrap;
    .month_item {
      width: 33.33%;
      border: 5rpx solid #fff;
    }
  }
}
.hots_wrap {
  .hots_title {
    padding: 20rpx;
    text {
      border-left: 15rpx solid $color;
      font-size: 30rpx;
      padding-left: 20rpx;
      font-weight: 600;
    }
  }

  .hots_content {
    display: flex;
    flex-wrap: wrap;
    .hot_item {
      width: 33.33%;
      border: 5rpx solid #fff;
      image {
      }
    }
  }
}
</style>